<template>
  <!-- 订单界面 -->
  <div class="order">
    <!-- 头部 -->
    <van-nav-bar title="我的订单" left-arrow @click-left="exit" @click-right="to_cart" :fixed="true" :placeholder="true">
      <template #right>
        <van-icon name="shopping-cart-o" size="18" />
      </template>
    </van-nav-bar>
    <!-- 主体 -->
    <van-tabs v-model="active" animated>
      <van-tab v-for="(item1,index1) in list" :key="index1" :title="item1">
        <div v-if="data.length!=0">
          <!-- 全部订单界面 -->
          <div v-if="index1==0">
            <van-card v-for="(item,index) in data" :key="index+'px'" :num="item.select_num"
              :price="((item.price-0)*item.select_num).toFixed(2)" :desc="item.text" :title="item.name">
              <template #thumb>
                <van-image :src="my_get_img(item)" @click="to_shopping(item)">
                  <template v-slot:loading>
                    <van-loading type="spinner" size="20" />
                  </template>
                </van-image>
              </template>
              <template #tags>
                <van-tag v-if="item.is_refund==true&&item.is_to_refund!=true" plain type="danger">申请退货中</van-tag>
                <van-tag v-else-if=" item.is_refund==true &&item.is_to_refund==true" plain type="danger">已退货</van-tag>
                <van-tag v-else-if="item.is_payment==false" plain type="danger ">待付款</van-tag>
                <van-tag v-else-if="item.is_deliver==false" plain type="primary ">待发货</van-tag>
                <van-tag v-else-if="item.is_get==false" plain type="warning">待收货</van-tag>
                <van-tag v-else-if="item.estimate==''" plain type="success ">待评价</van-tag>
                <van-tag v-else plain color="#7232dd">交易完成</van-tag>
              </template>
              <template #footer>
                <van-button v-if="item.estimate!=''" size="mini" plain type="primary" @click="to_estimate(item)">查看评价
                </van-button>
                <van-button v-if="item.is_refund==false" size="mini" plain type="danger" @click="order_change(item,2)">
                  申请退货</van-button>
                <van-button v-if="item.is_refund==true && item.is_to_refund==false" size="mini" plain type="danger"
                  @click="order_change(item,3)">
                  取消申请</van-button>
              </template>
            </van-card>
          </div>
          <!-- 待付款订单界面 -->
          <div v-if="index1==1">
            <van-card v-for="(item,index) in list_payment" :key="index+'px'" :num="item.select_num"
              :price="((item.price-0)*item.select_num).toFixed(2)" :desc="item.text" :title="item.name">
              <template #thumb>
                <van-image :src="my_get_img(item)" @click="to_shopping(item)">
                  <template v-slot:loading>
                    <van-loading type="spinner" size="20" />
                  </template>
                </van-image>
              </template>
              <template #tags>
                <van-tag plain type="danger">待付款</van-tag>
              </template>
              <template #footer>
                <van-button size="mini" type="danger" @click="order_change(item,0)">付款</van-button>
              </template>
            </van-card>
          </div>
          <!-- 待发货订单界面 -->
          <div v-if="index1==2">
            <van-card v-for="(item,index) in list_deliver" :key="index+'px'" :num="item.select_num"
              :price="((item.price-0)*item.select_num).toFixed(2)" :desc="item.text" :title="item.name">
              <template #thumb>
                <van-image :src="my_get_img(item)" @click="to_shopping(item)">
                  <template v-slot:loading>
                    <van-loading type="spinner" size="20" />
                  </template>
                </van-image>
              </template>
              <template #tags>
                <van-tag plain type="primary">待发货</van-tag>
              </template>
            </van-card>
          </div>
          <!-- 待收货订单界面 -->
          <div v-if="index1==3">
            <van-card v-for="(item,index) in list_get" :key="index+'px'" :num="item.select_num"
              :price="((item.price-0)*item.select_num).toFixed(2)" :desc="item.text" :title="item.name">
              <template #thumb>
                <van-image :src="my_get_img(item)" @click="to_shopping(item)">
                  <template v-slot:loading>
                    <van-loading type="spinner" size="20" />
                  </template>
                </van-image>
              </template>
              <template #tags>
                <van-tag plain type="warning">待收货</van-tag>
              </template>
              <template #footer>
                <van-button size="mini" type="primary" @click="order_change(item,1)">确认收货</van-button>
              </template>
            </van-card>
          </div>
          <!-- 待评价订单界面 -->
          <div v-if="index1==4">
            <van-card v-for="(item,index) in list_estimate" :key="index+'px'" :num="item.select_num"
              :price="((item.price-0)*item.select_num).toFixed(2)" :desc="item.text" :title="item.name">
              <template #thumb>
                <van-image :src="my_get_img(item)" @click="to_shopping(item)">
                  <template v-slot:loading>
                    <van-loading type="spinner" size="20" />
                  </template>
                </van-image>
              </template>
              <template #tags>
                <van-tag plain type="success ">待评价</van-tag>
              </template>
              <template #footer>
                <van-button size="mini" type="info" @click="estimate(item)">评价</van-button>
              </template>
            </van-card>
          </div>
        </div>
        <!-- 无订单默认显示 -->
        <div v-else>
          <van-empty description="还没有订单，快去逛逛吧"></van-empty>
        </div>
      </van-tab>
    </van-tabs>
    <van-popup v-model="show" position="right" :style="{ width: '100%',height:'101%' }">
      <shopping v-on:exit="show=false" :data_base='form'></shopping>
    </van-popup>
  </div>
</template>

<script>
import shopping from "./shopping.vue";
export default {
  components: { shopping },
  data() {
    return {
      active: 0,
      list: ["全部订单", "待付款", "待发货", "待收货", "待评价"],
      data: [],
      list_payment: [],
      list_deliver: [],
      list_get: [],
      list_estimate: [],
      form: "",
      show: false,
    };
  },
  created() {
    this.active = this.$route.params.sx - 0;
    this.getDate();
  },
  methods: {
    my_get_img(item) {
      if (item.imgs[0]) {
        return item.imgs[0].url;
      } else {
        return this.$url + "img/redmi9.jpg";
      }
    },
    //查看商品详情（待修改）
    to_shopping(order) {
      console.log(order.goods_id);
      let myur = this.$url + "goods_read";
      this.axios.post(myur, { id: order.goods_id }).then((res) => {
        let a = res.data.data;
        a = a.replace(/\\/g, "");
        a = a.replace(/:"\[/g, ":[");
        a = a.replace(/\]"/g, "]");
        a = a.replace(/:"{/g, ":{");
        a = a.replace(/}"/g, "}");
        a = JSON.parse(a)[0];
        this.form = a;
        this.show = true;
      });
    },
    //查看商品评价
    to_estimate(data) {
      this.$router.push({ name: "estimate", params: { order_id: data.id } });
    },
    //返回上一页
    exit() {
      this.$router.go(-1);
    },
    //前往购物车
    to_cart() {
      this.$router.push("/cart");
    },
    //获取订单信息，并分类
    getDate() {
      this.list_payment = [];
      this.list_deliver = [];
      this.list_get = [];
      this.list_estimate = [];
      let sta = localStorage.getItem("sta");
      sta = JSON.parse(sta);
      if (sta.sx == 1) {
        //读取用户信息
        let myur = this.$url + "order_read";
        this.axios.post(myur, { user_id: sta.id }).then((res) => {
          let b = res.data.data;
          b = b.replace(/\\/g, "");
          b = b.replace(/:"\[/g, ":[");
          b = b.replace(/\]"/g, "]");
          b = b.replace(/"false"/g, "false");
          b = b.replace(/"true"/g, "true");
          b = JSON.parse(b);
          this.data = b;
          for (let i = 0; i < this.data.length; i++) {
            if (
              this.data[i].is_refund == false &&
              this.data[i].is_to_refund == false
            ) {
              if (this.data[i].is_payment == false) {
                this.list_payment.push(this.data[i]);
              } else if (this.data[i].is_deliver == false) {
                this.list_deliver.push(this.data[i]);
              } else if (this.data[i].is_get == false) {
                this.list_get.push(this.data[i]);
              } else if (this.data[i].estimate == "") {
                this.list_estimate.push(this.data[i]);
              }
            }
          }
        });
      }
    },
    //修改订单信息
    order_change(data, a) {
      var data_order = {
        id: data.id,
        select_num: data.select_num,
        is_payment: data.is_payment,
        is_refund: data.is_refund,
        is_get: data.is_get,
        is_deliver: data.is_deliver,
        estimate: data.estimate,
        is_to_refund: data.is_to_refund,
      };
      if (a == 0) {
        let order = {
          sx: 1,
          id: [data.id],
        };
        order = JSON.stringify(order);
        localStorage.setItem("order", order);
        this.$router.push("/buy");
      } else if (a == 1) {
        data_order.is_get = true;
      } else if (a == 2) {
        data_order.is_refund = true;
      } else if (a == 3) {
        data_order.is_refund = false;
      }
      let myurl = this.$url + "order_change";
      this.axios.post(myurl, { data_order }).then((res) => {
        this.$toast.success("操作成功");
        this.getDate();
        console.log(res);
      });
    },
    //评价按钮
    estimate(item) {
      console.log(item);
      this.$router.push({
        name: "estimate",
        params: { order_id: item.id },
      });
    },
  },
  mounted() {
    let a = document.querySelector(".van-tabs__wrap");
    a.style.position = "fixed";
    a.style.width = "100%";
    a.style.zIndex = 99;
    let b = document.querySelector(".van-tabs__content");
    b.style.position = "relative";
    b.style.top = a.scrollHeight + "px";
    this.$nextTick(function () {
      this.$forceUpdate();
    });
  },
};
</script>

<style scoped>
.order {
  height: 100%;
  overflow: scroll;
}
.order::-webkit-scrollbar {
  display: none;
  position: relative;
}
</style>